<template>
	<div class="x-unit" @click.self="closeMask" :style="{ height: `${deviceH}px` }">
		<div class="unit-ctx" :style="{ 'background-image': `url(${modelBg})` }">
      <div class="info-table" v-if="!dangan">
              <div class="table-rs">

              <ul class="table-list" v-if="type=='car'">
								<li class="list-item">
									<div class="item-type">序号</div>
									<!-- <div class="item-pic">单位类型</div> -->
									<div class="item-people">图片</div>
									<div class="item-type">车牌号</div>
									<!-- <div class="item-type">车主</div>
									<div class="item-name">证件号</div> -->
									<div class="item-name" style="width:200px;">时间</div>
								</li>
								<li v-for="(item, i) in carlist" :key="item.id" class="list-item1">
									<div class="item-no">{{ i + 1 + 10 * (params.pageNum - 1) }}</div>
									<div class="item-pic" style="height: 100px;display:flex;align-items: center;cursor:pointer;" @click="picshow(item.pic)">
										<img class="pic" :src="item.pic |filterimgsrc" style="width: 100%;" />
									</div>
									<div class="item-type">{{ item.license }}</div>
									<!-- <div class="item-type">{{ item.name }}</div>
									<div class="item-name" @click="changedangan(item.idNum)" style="cursor:pointer;">{{ new String().hideidCard(item.idNum) }}</div> -->
									<div class="item-time" style="width:200px;">{{ new Date().dateFtt(item.startTime) }}</div>
								</li>
							</ul>
              <ul class="table-list" v-if="type=='menjin'">
								<li class="list-item1 lineheader" style="height:50px;align-items:center">
									<div class="item-no">序号</div>
									<div class="item-pic">图片</div>
									<div class="item-type">姓名</div>
									<div class="item-name" style="width:200px">证件号</div>
									<div class="item-time">时间</div>
									<!-- <div class="item-people">位置</div> -->
									<div class="item-people">类型</div>
								</li>
								<li v-for="(item, i) in menjinlist" :key="item.id" class="list-item1">
									<!-- <div class="item-pic"></div> -->
									<div class="item-no">{{ i + 1 + 10 * (params.pageNum - 1) }}</div>
									<div class="item-pic" style="height: 100px;display:flex;align-items: center;justify-content: center;cursor: pointer;" @click="picshow(item.pic)">
										<img class="pic" :src="item.pic |filterimgsrc" style="height: 80%;" />
									</div>
									<div class="item-type">{{ item.name }}</div>
									<div class="item-name" @click="changedangan(item.idNum)" style="cursor:pointer;width:200px">{{ new String().hideidCard(item.idNum) }}</div>
									<div class="item-time">{{ new Date().dateFtt(item.eventTime) }}</div>
									<!-- <div class="item-people">{{ item.gateName!=null?item.gateName.substring(0, 5):"" }}</div> -->
									<div class="item-people">{{ item.type === 1 ? "出" : "入" }}</div>
								</li>
							</ul>
              </div>
              <div v-if="allpage>0" class="table-footer">
                <x-page
                  :currentPage="params.pageNum"
                  @currentChange="currentChange"
                  :page-size="5"
                  :allpage="allpage"
                  :total-num="false"
                />
              </div>
            </div>
             <div v-if="dangan">
              <x-dangan :id="danganid"  @changedangan="close()"></x-dangan>
            </div>
    </div>
     <!-- dialog -->
          <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" v-dialogDrag class="jk-dialog" width="50%">
            <div style="width:786px;height:432px;margin:auto">
              <img :src="picurl |filterimgsrc" alt style="height:100%" />
            </div>
          </el-dialog>


	</div>
</template>
<script>
import XPage from '@/components/xpage'
import {  getDistrictVehicleForPage} from '@/api/device'
import {
  districtGatedPersoninfoPageList,
} from '@/api/peopleApi'
import XDangan from '@/components/xdanganmodel'
export default{
  name:'list',
  props:{
    type:{
      type:String,
      default:""
    },
     params:{
      type:Object,
      default:{}
    }
  },
  data(){
    return{
      list:[],
      title:'',
      pageSize:10,
      pageNum:1,
      modelBg: require('@/assets/images/modelBg.png'),
      deviceH:0,
      carlist:[],
      menjinlist:[],
      allpage:0,
      dialogVisible:false,
      picurl:"",
      dangan:false,
      danganid:''
    }
  },
  components:{
    XPage,
    XDangan
  },
   beforeMount () {
    let h = document.documentElement.clientHeight || document.body.clientHeight
    this.deviceH = h
  },
  mounted() {

    if(this.type=="car"){
     this.getCar()
    }
    if(this.type=="menjin"){
      this.getmenjin()
    }
  },
  methods: {
    changedangan(num){
      this.dangan=true;
      this.danganid=num;
    },
    close(){
      this.dangan=false;
    },
    closeMask(){
      this.$emit("closeMask")
    },
    picshow (url) {
      this.dialogVisible = !this.dialogVisible
      this.picurl = url
    },
    async getmenjin(){
      let res=await districtGatedPersoninfoPageList(this.params)
      this.menjinlist=res.list
      this.allpage = Math.ceil(res.total / 10);
    },
    async getCar(){
      let res=await getDistrictVehicleForPage(this.params)
      this.carlist=res.list
      this.allpage = Math.ceil(res.total / 10);
    },
    currentChange(n) {
      console.log("分页");
      this.params.pageNum = n;
      if(this.type=="car"){
        this.getCar()
      }
      if(this.type=="menjin"){
        this.getmenjin()
      }
    },
  },
}
</script>
<style lang="less" scoped>
	.x-unit {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.8);
		z-index: 999;
		.unit-ctx {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 1177px;
			height: 800px;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center;
			padding: 10px 30px;
			box-sizing: border-box;
    }
         .info-table {
        flex: 3;
        height: 659px;
        padding-left: 40px;
        box-sizing: border-box;
        .table-rs {
          width: 100%;
          height: 562px;
          overflow-y: auto;
          .table-header {
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .header-item {
              width: 186px;
              height: 100%;
              border: none;
              outline: none;
              background: #06121d;
              border: 1px solid rgba(62, 178, 215, 0);
              border-radius: 4px;
              font-size: 14px;
              color: #fff;
              padding: 0 14px;
              box-sizing: border-box;
              .input {
                font-size: 14px;
                color: #fff;
                width: 100%;
                height: 100%;
                border: none;
                outline: none;
                background: transparent;
              }
            }
            .header-select {
              width: 186px;
              margin-left: 20px;
              height: 100%;
            }
            .header-more {
              width: 56px;
              margin-left: 20px;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #72edf5;
              line-height: 28px;
              text-decoration: underline;
            }
            .header-btn {
              width: 66px;
              height: 100%;
              background: #72edf5;
              border-radius: 4px;
              text-align: center;
              line-height: 36px;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #000000;
              cursor: pointer;
            }
          }
          .table-list {
            width: 100%;
            list-style: none;
            padding: 0;
            margin-top: 15px;
            .list-item {
              padding: 0;
              margin: 0;
              list-style: none;
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 36px;

              &:nth-of-type(2n + 1) {
                background: #06121d;
              }
              &:nth-of-type(2n) {
                background: transparent;
              }
              .item-pic {
                width: 120px;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                text-align: center;
              }
              .item-name {
                width: 158px;
                text-align: left;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                 overflow:hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: normal;

              }
              .item-type {
                width: 116px;
                text-align: left;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
              }
              .item-phone {
                width: 125px;
                text-align: left;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                 overflow:hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: normal;
              }
              .item-people {
                width: 116px;
                text-align: left;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                 overflow:hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: normal;
              }
              .item-cardid {
                width: 194px;
                text-align: left;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                 overflow:hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: normal;
              }
            }
          }
        }
        .table-footer {
          width: 100%;
          padding-top: 60px;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-end;
        }
      }
  }

  		.list-item1 {
								padding: 0;
								margin: 0;
								list-style: none;
								width: 100%;
								display: flex;
								justify-content: space-between;
								align-items: center;
								height: 100px;

								&:nth-of-type(2n + 1) {
									background: #06121d;
								}

								&:nth-of-type(2n) {
									background: transparent;
								}

								.item-no {
									width: 50px;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
									text-align: center;
								}

								.item-pic {
									width: 120px;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
									text-align: center;

									div {
										line-height: 100px;
									}
								}

								.item-name {
									width: 158px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
								}

								.item-time {
									width: 258px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
								}

								.item-type {
									width: 116px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
								}

								.item-phone {
									width: 125px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
								}

								.item-people {
									width: 116px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
								}

								.item-cardid {
									width: 194px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 60px;
								}
              }
  body::-webkit-scrollbar {
		display: none;
	}

	.table-rs::-webkit-scrollbar {
		display: none;
  }
  .lineheader>div{
    line-height: 50px !important;
  }
</style>
